import BaseInput from "@/components/base/Input"
import { Props } from "@/components/form_item/formItemConfig"
import styled from "@emotion/styled"
import { memo } from "react"
import { useFormContext } from "react-hook-form"
import Svg from "../base/Svg"

const RadioBoxInput = memo(({ fieldName, required, style, className = "" }: Props) => {
    const { register } = useFormContext()
    return (
        <RadioBox>
            <Check
                id={"radioId-" + fieldName}
                type="radio"
                style={style}
                className={className}
                {...register(fieldName, {
                    required: {
                        message: `${fieldName} is required`,
                        value: required ?? true,
                    },
                })}
            />
            <Label htmlFor={"radioId-" + fieldName}>
                <span className={"checkbox_false"}>
                    <Svg src={"components/form_item/checkbox_false.svg"} />
                </span>
                <span className={"checkbox_true"}>
                    <Svg src={"components/form_item/checkbox_true.svg"} />
                </span>
            </Label>
        </RadioBox>
    )
})

export default RadioBoxInput

const RadioBox = styled.div`
    position: relative;
    margin-right: 5rem;
`

const Check = styled(BaseInput)`
    width: 20rem;
    height: 20rem;
    display: none;

    & + label > span.checkbox_false {
        display: inline-block;
    }

    &:checked + label > span.checkbox_true {
        display: inline-block;
    }

    &:checked + label > span.checkbox_false {
        display: none;
    }

    & ~ div {
        display: block;
    }

    &:checked ~ div {
        display: none;
    }
`

const Label = styled.label`
    width: 20rem;
    height: 20rem;
    display: block;
    & > span {
        line-height: normal;
        text-align: center;
    }
    & > span.checkbox_false,
    & > span.checkbox_true {
        display: none;
    }
`
